import exitLogin from '@/assets/images/exitLogin.png';
import { history } from '@umijs/max';
import { Button, Dropdown, MenuProps, message } from 'antd';
import { debounce } from 'lodash';
import React from 'react';

type Props = {
  children?: React.ReactNode | React.ReactElement;
};

const items: MenuProps['items'] = [
  {
    key: 'outLogin',
    label: (
      <a>
        <img
          width={16}
          src={exitLogin}
          style={{ marginRight: '2px', marginTop: '-2px' }}
        />
        退出登录
      </a>
    ),
  },
  {
    key: 'owner',
    label: <a>个人中心</a>,
  },
  {
    key: 'setting',
    label: <a>设置</a>,
  },
];

const App: React.FC<Props> = (props) => (
  <Dropdown
    menu={{
      items,
      onClick: debounce((event: { key: any }) => {
        const { key } = event;
        if (key === 'outLogin') {
          sessionStorage.removeItem('access_token');
          history.replace('/login');
        } else {
          message.warning('敬请期待');
        }
      }, 1000),
    }}
    placement="bottom"
  >
    {props.children ? props.children : <Button>default</Button>}
  </Dropdown>
);

export default App;
